<template>
    <div>
        <h3>房型页面</h3>
        <div>
            名称:<input type="text" v-model="a.name">
            <input type="button" value="查询" @click="getlist">
            <input type="button" value="批量删除" @click="delall">
            <input type="button" value="批量发布" @click="updateall(1)">
            <input type="button" value="批量不发布" @click="updateall(0)">

        </div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="checked" @click="checkall"></td>
                    <td>房型价格</td>
                    <td>房型状态</td>
                    <td>是否有窗</td>
                    <td>房型面积</td>
                    <td>房型图片</td>
                    <td>房型名称</td>
                    <td>入住人数</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list">
                    <td><input type="checkbox" v-model="ids" :value="item.Id" @change="checkone"></td>
                    <td>{{ item.Price }}</td>
                    <td>{{ item.State == 1 ? "发布" : "不发布" }}</td>
                    <td>{{ item.IsWindow == 1 ? "有" : "没有" }}</td>
                    <td>{{ item.Area }}</td>
                    <td><img :src="item.Photo" width="100"></td>
                    <td>{{ item.HouseTypeName }}</td>
                    <td>{{ item.Count }}</td>
                    <td><input type="button" value="发布" v-if="item.State == 0" @click="updatestate(item.Id, 1)">
                        <input type="button" value="不发布" v-if="item.State == 1" @click="updatestate(item.Id, 0)">
                        <input type="button" value="删除"  @click="Del(item.Id)">
                        <input type="button" value="详情" @click="xiangqing(item.Id)">
                        <input type="button" value="修改" @click="updatee(item.Id)">
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            每页显示<select v-model="a.pageHang" @change="show">
                <option :value="item" v-for="item in arr" :key="item">{{item}}</option>
            </select>条
            <input type="button" value="首页" @click="goPage(1)" />
            <input type="button" value="上一页" @click="goPage(a.pageYe - 1)" />
            <span v-for="item in data.zongYe" @click="goPage(item)">{{ item }}</span>
            <input type="button" value="下一页" @click="goPage(a.pageYe + 1)" />
            <input type="button" value="尾页" @click="goPage(data.zongYe)" />
            <input type="number" v-model="a.pageYe" />
            <input type="button" value="跳转" @click="goPage(a.pageYe)">
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';
import moment from 'moment';
const router = useRouter();
const route = useRoute();

onMounted(() => {
    show();
})

let checked = ref(false)

let arr=ref([1,2,3,4])

let ids = ref([])

let a: any = reactive({
    pageYe: 1,
    pageHang: 2,
    name: ''
})

let data: any = reactive({
    list: [],
    zongHang: '',
    zongYe: ''
})

const xiangqing:any=(id:any)=>{
    router.push({
        path:'/houseupdate',
        query:{id:id}
    })
}
const updatee:any=(id:any)=>{
    router.push({
        path:'/housetypeupdate',
        query:{id:id}
    })
}
const Del:any=(id:any)=>{
    let f = confirm("确认删除?");
    if (f) {
        axios({
            url:'/api/HouseType/DelAll',
            method:'delete',
            params:{
                ids:id
            }
        })
        .then((res) => {
                console.log(res)
                if (res.data > 0) {
                    alert("删除成功");
                    getlist();
                }
            })
    }
}

const delall: any = () => {
    if (ids.value.length == 0) {
        alert("必选");
        return;
    }
    Del(ids.value.toString());
    checked.value=false
    ids.value=[]
}
const updateall: any = (state:any) => {
    if (ids.value.length == 0) {
        alert("必选");
        return;
    }
    let f = confirm("确认修改?");
    if (f) {
        axios({
            url:'/api/HouseType/UpdateStateAll',
            method:'put',
            params:{
                ids:ids.value.toString(),
                state:state
            }
        })
        .then((res) => {
                console.log(res)
                if (res.data > 0) {
                    alert("修改成功");
                    checked.value=false;
                    ids.value=[];
                    getlist();
                }
            })
            .catch((err) => {
                console.log(err);
                checked.value=false;
            })

    }
}


const checkall = () => {
    checked.value = !checked.value//相当于“if else”取反
    if (checked.value === true) {
        ids.value = data.list.map((item: any) => {
            return item.Id
        })
    }
    else {
        ids.value = []
    }
}

const checkone = () => {
    if (ids.value.length == data.list.length) {
        checked.value = true
    }
    else {
        checked.value = false
    }
}

const updatestate: any = (id: any, state: any) => {
    axios({
        url: '/api/HouseType/updatestate',
        method: 'put',
        params: { id: id, state: state }
    })
        .then((res) => {
            console.log(res);
            if (res.data > 0) {
                alert("成功");
                show();
            }
        })
}

const getlist = () => {
    a.pageYe = 1
    show();
}

const goPage = (num: any) => {
    if (num < 1) {
        a.pageYe == 1;
        return;
    }
    if (num > data.zongYe) {
        a.pageYe == data.zongYe;
        return;
    }
    a.pageYe = num;
    show();
}

const show = () => {
    axios({
        url: 'api/HouseType/ShowHouse',
        method: 'get',
        params: a
    })
        .then((res) => {
            console.log(res);
            data.list = res.data.list;
            data.zongHang = res.data.zongHang;
            data.zongYe = res.data.zongYe;
        })
}


</script>

<style scoped>
span {
    margin: 0 10px;
}
input{
    margin: 0 10px;
}
</style>